<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章编辑</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/nprogress.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="apple-touch-icon-precomposed" href="images/icon/icon.png">
    <link rel="shortcut icon" href="images/icon/favicon.ico">

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="/login/login.js"></script>
    <script src="/js/blog.js"></script>
<!--    UEditor  修改为聚堆路径引用 -->
    <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>
    <style>
        div.el-upload>input.el-upload__input{
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <blog-header ref="lg"></blog-header>
    <el-form ref="form" :model="form" label-width="80px" style="margin: 10px 100px">

        <el-form-item label-width="0px">
            <el-form :inline="true">
                <el-form-item label="文章标题" label-width="80px">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="标题图片">
                    <el-input v-model="form.titleImgs"></el-input>
                </el-form-item>
                <el-form-item label-width="0px">
                    <el-image :src="form.titleImgs || '/images/excerpt.jpg'" style="height:40px;vertical-align: middle"
                              :preview-src-list="[form.titleImgs || '/images/excerpt.jpg']"></el-image>

                    <el-upload style="display: inline-block; margin-left: 10px; vertical-align: middle" action="/upload" :show-file-list="false" :on-success="uploaded">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
        </el-form-item>

        <el-form-item label-width="0px">
            <el-form :inline="true">
                <el-form-item label="关键字" label-width="80px">
                    <el-input v-model="form.keyWords"></el-input>
                </el-form-item>
                <el-form-item label="文章描述">
                    <el-input v-model="form.description"></el-input>
                </el-form-item>
                <el-form-item label="标签">
                    <el-input v-model="form.label"></el-input>
                </el-form-item>
                <el-form-item label="分类">
                    <el-select v-model="form.categoryId" placeholder="请选择">
                        <el-option
                                v-for="item in categories"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="文章内容">
            <div style="line-height: normal">
            <textarea id="editor" style="height:300px;"></textarea>
            </div>
        </el-form-item>
        <el-form-item style="text-align: right">
            <el-button type="primary" @click="save" :disabled="checkLogin()">保存</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
    <blog-footer></blog-footer>
</div>
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script>var $ = jQuery;</script>
<script src="js/nprogress.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
<script src="js/jquery.ias.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<script>
    var v = new Vue({
        el : "#app",
        data:{
            form : {},
            ue : null,
            categories : []
        },
        created(){
            this.ue = UE.getEditor('editor');
            // http://127.0.0.1/editArticle.html ==> 新增文章
            // http://127.0.0.1/editArticle.html?id=1 ==> 修改文章

            if(/.+=(\d+)/.test(location.href)){
                let id = location.href.replace(/.+=(\d+)/,"$1")
                if(id){
                    axios.get("/c112s3plyblog/article/queryById?id="+id).then(res=>{
                        this.form = res.data;
                        setTimeout(()=>{
                            UE.getEditor('editor').setContent(this.form.content);
                        }, 100)

                    })
                }
            }
            axios.get("/c112s3plyblog/category/queryAll").then(res=>{
                this.categories = res.data;
            })
        },
        methods: {
            save(){
                if( ! this.$refs.lg.user.id ){
                    this.$alert("请先登录系统!");
                    return;
                }

                let p = buildParams(this.form);
                p.delete("content");
                p.append("content", this.ue.getContent());
                axios.post("/c112s3plyblog/article/save",p).then(res=>{
                    if(res.data.code){
                        this.$message(res.data.msg)
                    } else {
                        this.$alert(res.data.msg)
                    }
                });
            },
            checkLogin(){
                let ret = this.$refs.lg && this.$refs.lg.user && this.$refs.lg.user.id;
                return ret == undefined;
            },
            uploaded(res){
                this.form.titleImgs = res.data;
                this.$forceUpdate(); // 强制更新
            }
        }
    })
</script>
</body>
</html>